<html>
	<head>
		<title>JAM with Chrome Demo</title>
		<style type="text/css">
			
			body {
        background-color: #F8F8F8;
        color: #424242;
        text-align: center;
        font-size: 24px;
        font-family: 'Helvetica',sans-serif;
			}
			
			a {
  			color: #000;
			}
			
			#drum_bg{
  			display: block;
  			margin: 0 auto;
  			position: relative;
  			top: 24px;
  			left: -4px;
			}
			
			#wrapper {
				position: relative;
				width: 400px;
				margin: 50px auto;
				z-index: 1;
			}

			#stage {
				position: absolute;
				width: 400px;
				height: 300px;
				z-index: 10;
				-moz-user-select: none;
				-webkit-user-select: none;
				-ms-user-select: none;
				user-select: none;
			}

			#stage.active {
				cursor: pointer;
			}


			#snare {
				position: absolute;
				top: 40px;
				left: 95px;
				width: 200px;
   				height: 200px;
   				background: url(snare.png) center center no-repeat;
   				background-size: 100%;

			}

			#snare.hit {
				-webkit-animation: drumHit .15s linear infinite;
				animation: drumHit .15s linear infinite;
			}

			@-webkit-keyframes drumHit {
				0% {
				  background-size: 100%;
				}
				10% {
					background-size: 95%;
				}
				30% {
				  background-size: 97%;
				}
				50% {
					background-size: 100%;
				}
				60% {
					background-size: 98%;
				}
				70% {
					background-size: 100%;
				}
				80% {
					background-size: 99%;
				}
				100% {
					background-size: 100%;
				}	
			}

			@keyframes drumHit {
				0% {
				  background-size: 100%;
				}
				10% {
					background-size: 95%;
				}
				30% {
				  background-size: 97%;
				}
				50% {
					background-size: 100%;
				}
				60% {
					background-size: 98%;
				}
				70% {
					background-size: 100%;
				}
				80% {
					background-size: 99%;
				}
				100% {
					background-size: 100%;
				}	
			}

		</style>
	</head>
	<body>
  	<h3>JAM with Chrome Demo</h3>
		<div>
			<a href="index.html">Example 1</a> | 
			<a href="hit2.html">Example 2</a> | 
			Example 3 |
			<a href="hit4.html">Example 4</a>
		</div>

		<div id="wrapper">
			<div id="stage"></div>
			<img src="site_title.png" id="drum_bg" width="336">
			<div id="snare"></div>
			<div id="output"></div>
		</div>
		
		<script>

      function Stage(id) {
        this.el = document.getElementById(id);
        
        this.position();
        this.listeners();
        this.hitZones = [];
        return this;
      }
      
      Stage.prototype.position = function() {
        var offset = this.offset();
        this.positionTop = Math.floor(offset.top);
        this.positionLeft = Math.floor(offset.left);
      };
      
      Stage.prototype.offset = function() { 
        var _x, _y,
            el = this.el;
        
        if (typeof el.getBoundingClientRect !== "undefined") {
          return el.getBoundingClientRect();
        }else{
          _x = 0;
          _y = 0;
          while(el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) ) {
            _x += el.offsetLeft;
            _y += el.offsetTop;
            el = el.offsetParent;
          }
          return { top: _y - window.scrollY, left: _x - window.scrollX };
        }
      };
      
      Stage.prototype.listeners = function() {
        var _self = this,
            output = this.elOutput;
      
        window.addEventListener('resize', function(){
          _self.position();
        }, false);
      
        window.addEventListener('scroll', function(){
          _self.position();
        }, false);
      
        this.el.addEventListener('mousedown', function(e){
        	var x = e.clientX - _self.positionLeft,
        		y = e.clientY - _self.positionTop;
        
        	_self.hitZones.forEach(function(zone){
        		_self.check(x, y, zone);
        	});
        
        }, false);
        
        document.addEventListener('mouseup', function(e){
        	_self.hitZones.forEach(function(zone){
        		zone.el.classList.remove('hit');
        	});
        }, false);
        
        this.el.addEventListener('mousemove', function(e){
          var x = e.clientX - _self.positionLeft,
              y = e.clientY - _self.positionTop;
          
          _self.hitZones.forEach(function(zone){
            _self.checkHover(x, y, zone);
          });        
        }, false);
      };
      
      Stage.prototype.check = function(x, y, zone) {
        if(!zone.el) return;
      
        if(zone.inside(x, y)){
          zone.el.classList.add('hit');
          this.el.classList.add('active');
        }else{
          zone.el.classList.remove('hit');
          this.el.classList.remove('active');
        }
      };
      
      Stage.prototype.addCircle = function(id) {
        var el = document.getElementById(id),
            rad = el.offsetWidth / 2,
            circ = new Circle(el.offsetLeft + rad, 
                              el.offsetTop + rad, 
                              rad
                            );
        circ.el = el;

        this.hitZones.push(circ);
        return circ;
      };
      
            
      Stage.prototype.checkHover = function(x, y, zone){
        if(!zone.el) return;
      
        if(zone.inside(x, y)){
          this.el.classList.add('active');
        }else{
          this.el.classList.remove('active');
        }
      }


			function Circle(x, y, radius) {
				this.x = x;
				this.y = y;
				this.radius = radius;
				return this;
			}

			Circle.prototype.inside = function(x,y){ 
        var dx = x - this.x,
        		dy = y - this.y,
        		r = this.radius;
        return dx*dx+dy*dy <= r*r;
			}

			var stage = new Stage("stage");
			stage.addCircle("snare");	

		</script>
		
		
	</body>
</html>